<template>
    <div class="top">
        <div class="top1">
            <ul>
                <li><img src="../assets/images/logo.png"/></li>
                <li>
                  <input class="shopp" placeholder="商品名称"/>
                  <img class="suo" src="../assets/images/search.png"/>
                </li>
                <li >
                  <img class="che" src="../assets/images/car.png"/>
                  <p  @click="$router.push('/cart')" class="cars" ><span>购物车</span></p>
                </li>
                <li>
                  <img class="tels" src="../assets/images/tel.png"/>
                  <span class="math">400-632-5588</span>
                </li>
            </ul>
        </div>
        <div class="top2">
            <ul>
                <li><router-link to="/" exact>首页</router-link></li>
                <li><router-link to="/shopp">商品</router-link></li>
                <li><router-link to="/order">订单</router-link></li>

                <li @mouseenter="enter()" @mouseleave="leave()" style="color:rgb(110, 118, 154)">全部商品分类<img class="shopping" src="../assets/images/shopp.png"/></li>
                <li><img @click="modifyAvatar" class="mens" :src="avatar|defaultAvatar"/>您好，<router-link to="/login">请登录</router-link></li>
            </ul>
        </div>
        <div class="all_son" v-if="all" @mouseenter="enter()" @mouseleave="leave()">
          <ul>
            <li><router-link to="" exact>新生儿疾病筛查型</router-link></li><br/>
            <li><router-link to="/order">产前筛查型</router-link></li><br/>
            <li><router-link to="/detail">体检型</router-link></li><br/>
            <li><router-link to="/detail">903滤纸</router-link></li><br/>
            <li><router-link to="/detail">新筛试剂</router-link></li>
          </ul>
        </div>
        <div class="hide" >
          <file-upload target="/browser/api/common/file" action="POST" ref="fileUpload" v-on:finish="finishUpload"></file-upload>
        </div>
    </div>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex'
import fileUpload from './fileUpload'
import {editProfile} from '../service/api'
export default {
  data () {
    return {
      all: false
    }
  },
  computed: {
    ...mapGetters(['avatar'])
  },
  mounted () {
    this.$store.dispatch('getMyPreofile')
  },
  methods: {
    ...mapMutations(['UPDATE_AVATAR']),
    finishUpload: function (url) {
      this.updateAvatar(url)
    },
    modifyAvatar: function () {
      this.$refs.fileUpload.handleClick()
    },
    updateAvatar: function (url) {
      editProfile({avatar: url}).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功'

          })
          this.UPDATE_AVATAR(url)
        }
      })
    },
    enter () {
      this.all = true
    },
    leave () {
      this.all = false
    }
  },
  components: {
    fileUpload
  }
}
</script>

<style scoped lang="less">
@import "../assets/less/top.less";

</style>
